<template>
  <div>
    <el-container v-loading="contentLoading" style="height: calc(100%);padding: 20px;">
      <div class="font-size-24 font-weight-600 margin-b-5"> {{ $t("loc.childPR") }} </div>
      <el-header class="white-backGroud margin-b-5"
                 style="height: 100px">
        <div class="padding-content-header">
          <ReportFilterMenu ref='menu'
                             @paramResult="getStudent"
                             @frameworkChange="frameworkChange"
                             @periodChange="periodChange">
          </ReportFilterMenu>
        </div>
      </el-header>
      <!-- 布局容器  分为  上中下 -->
      <el-container>
        <!-- 学生列表 -->
        <el-col :span="5"
                class="white-backGroud" style="margin-right: 5px">
          <el-aside class="padding-tip"
                    style="width: 100%">
            <div class="text-center">
              <div class="class-name-font text_left margin-b-10"
                   style="padding-left: 13px;"></div>
              <ul class="list scrollbar2"
                  style="overflow-x: hidden; height: 100%;"
                  >
                <li v-for="child in children"
                    :key="child.id"
                    :title="child.displayName"
                    class="pointer "
                    style="padding: 5px 10px;"
                    :style="{'background-color':  child.id === childCurrent.id ?'#E6F4F9':''}"
                    @click="changeChild(child)">
                  <label class="avatar1 pointer">
                    <img class="child-img"
                         :src="child.avatarUrl"
                         alt="..." />
                  </label>

                  <label class="childName pointer text-left">{{ child.displayName }}</label>

<!--                  <label class="checkImg">-->
<!--                    <img class="child-img"-->
<!--                         src="@/assets/img/dashboard/checkImg.png"-->
<!--                         alt="..." />-->
<!--                  </label>-->
                </li>
              </ul>
            </div>
          </el-aside>
        </el-col>
        <!-- 模块主内容 -->
        <el-col :span="19" style="flex: 1;">
          <el-main class="white-backGroud padding-content scrollbar2"
                   id="mainContent"
                   :style="{'height': 700  +'px'}">
            <!-- 评分信息 -->
            <div>
              <div class="child-progress-report student"
                   :class="viewCurrent.frameworkType"
                   id="report"
                   style="padding: 5px 20px;"
                   v-if="viewCurrent">
                <el-row class="margin-10">
                  <el-col :span="24"
                          class=" font-size-20 font-weight-600"> {{$t('loc.childReportTitle',{childName:viewCurrent.name})}}
                  </el-col>
                </el-row>

                <div class="margin-b-10"
                     style="font-size:14px;">
                  <el-row>
                    <el-col :span="8">{{$t("loc.childsName")}}: <label> {{ viewCurrent.name }} </label> </el-col>
                    <el-col :span="8">{{$t("loc.age")}}: <label> {{ viewCurrent.age }} </label> </el-col>
                    <el-col :span="8">{{$t("loc.dateBirth")}}: <label> {{ viewCurrent.birthday }} </label> </el-col>
                  </el-row>
                  <el-row>
<!--                    <el-col :span="8">{{$t("loc.tchName")}}: <label> {{ viewCurrent.teacherName }} </label> </el-col>-->
                    <el-col :span="8">{{$t("loc.centerName")}}: <label> {{ viewCurrent.schoolName }} </label> </el-col>
                    <el-col :span="8">{{$t("loc.className")}}: <label> {{ viewCurrent.groupName }} </label> </el-col>
                  </el-row>
<!--                  <el-row>-->
<!--                    <el-col :span="8">{{$t("loc.drdpCmptDate")}}: <label> {{ viewCurrent.completedDate }} </label> </el-col>-->
<!--                    <el-col :span="8">{{$t("loc.ssid")}}: <label> {{ viewCurrent.ssid }} </label> </el-col>-->
<!--                    <el-col :span="8">{{$t("loc.externalId")}}: <label> {{ viewCurrent.externalId }} </label> </el-col>-->
<!--                  </el-row>-->
                </div>
                <!-- / Rating Key 评分等级-->
                <div>
                  <div class="rating-key"
                       style="background: #f6f9f9;margin: 15px 0 15px 0;padding: 15px 5px;">
                    <table class="rating-table">
                      <tbody>
                      <tr>
                        <th style="width:11.3%;padding: 1.5% 0px 0 0;text-align: center;">
                          {{$t("loc.ratingPeriod")}}
                        </th>
                        <td>
                          <div class="flex fill">
                            <div class="item item-img "
                                 v-for="rating in viewCurrent.ratings"
                                 :key="rating.name"
                                 :class="rating.className">
                              {{rating.name.split(' ')[0]}}<br>{{rating.name.split(' ')[1]}}
                            </div>

                          </div>
                          <div class="flex range">
                            <div class="item">
                              {{viewCurrent.rangeStart}}
                            </div>
                            <div class="item item-img"></div>
                            <div class="item item-img">
                              {{viewCurrent.rangeEnd}}
                            </div>
                          </div>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                  <!-- 测评数据展示 -->
                  <div v-for="domain in viewCurrent.domainDatas"
                       :key="domain.name">
                    <Temptltem :viewCurrent="viewCurrent"
                               :domainData="domain"
                               :showAllAlias="showAllAlias"
                               :barSet="barSet">
                    </Temptltem>
                  </div>
                </div>
              </div>

            </div>
          </el-main>
        </el-col>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import ReportFilterMenu from './components/ReportFilterMenu.vue'
import { mapState } from 'vuex'
import FrameworkApi from '@/api/framework'
import Temptltem from './components/Temptltem.vue'

export default {
  name: 'ChildProgressReport',
  components: {
    ReportFilterMenu,
    Temptltem
  },
  data () {
    return {
      showAllAlias: false,
      barSet: {
        showType: 'all',
        height: 'small',
        symbol: true,
        offset: true
      },
      contentLoading: false,
      framework: {},
      period: {},
      childCurrent: {},
      viewCurrent: {},
      children : [],
    }
  },
  created () {
  },
  mounted () {
  },
  watch: {

  },
  computed: {
    ...mapState({
      currentUser: (state) => state.user.currentUser // 当前用户
    }),
  },
  methods: {
    // type 有属性代表
    changeChild (child) {
      this.childCurrent = child
      this.getChildDomainView()
    },
    getStudent(children) {
      this.children = children
      if (!this.childCurrent || !this.childCurrent.id || !this.children.find(item=>item.id===this.childCurrent.id)) {
        this.childCurrent = children[0]
        this.getChildDomainView()
      }
    },
    // 获得小孩领域观察
    getChildDomainView () {
      const childId = this.childCurrent.id
      const periodAlias = this.period.name
      const frameworkId = this.framework.id
      console.log('getChildDomainView', childId, periodAlias, frameworkId)
      if (!childId || !periodAlias || !frameworkId) {
        return
      }
      this.contentLoading = true
      FrameworkApi.getChildDomainsReport(childId, periodAlias, frameworkId).then(res => {
        this.viewCurrent = res
        this.viewCurrent.domainDatas = res.domainDatas
      }).finally(() => {
        this.contentLoading = false
      })
    } ,
    frameworkChange (framework) {
      let id = this.framework.id
      this.framework = framework
      if (id !== framework.id) {
        this.getChildDomainView()
      }
    },
    periodChange (period) {
      let name = this.period.name
      this.period = period
      if (name !== period.name) {
        this.getChildDomainView()
      }
    },
  }
}
</script>
<style lang="less">
.download-popover {
  padding: 6px 0px;
  li {
    padding: 11px 16px;
  }
}
</style>
<style scoped lang="less">
*:not(i) {
  font-family: Source Sans Pro;
}
.button {
  display: inline-block;
  // line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  color: #606266;
  -webkit-appearance: none;
  text-align: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 11px 16px;
  font-size: 14px;
  border-radius: 4px;
}
.selectBtnRP {
  width: 85%;
  overflow: hidden;
  display: inline-block;
  height: 15px;
}

.menuLocation {
  position: relative;
  top: -30px;
  right: -182px;
  background: #fff;
}
.noneClass {
  display: none;
}
.showClass {
  display: block;
}
.classStyle {
  //  border: 1px solid;
  width: 100%;
  height: 39px;
  padding: 7px;
}

.childName {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
  font-family: Helvetica Neue;
  overflow: hidden;
  width: 70%;
}
.list {
  padding-left: 13px;
  color: #444444;
  li {
    margin-left: -13px;
    margin-right: -13px;
    background: #fff;
  }
  li:hover {
    //  color: #0095c1;
    background-color: #e6f4f9;
  }
}
.ull > li li:hover {
  color: #0095c1;
  background-color: #e6f4f9;
}
.ull > li li {
  color: #606266;
}
.ull > li:hover {
  color: #10b3b7;
  background-color: #e6f4f9;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #e6f4f9;
}
// li .button:hover {

// }

.margin-b-5 {
  margin-bottom: 5px;
}
.margin-5 {
  margin: 5px 0px;
}
.margin-b-10 {
  margin-bottom: 10px;
}
.margin-10 {
  margin: 10px 0px;
}
.margin-b-10 label {
  font-weight: 700;
  font-size: 14px;
  // font-family: "Roboto";
  // width: 60%;
  vertical-align: text-top;
  line-height: 1.25;
  margin: 0px;
}
.padding-content-header {
  padding: 10px 5px;
}
.padding-content {
  padding: 10px 5px 0px;
}
.padding-tip {
  padding: 10px 0px;
}
.padding-top-1 {
  padding-top: 1%;
}
.white-backGroud {
  background: #fff;
}
.child-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.avatar1 {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.class-name-font {
  font-size: 16px;
  /* font-weight: 550; */
  color: black;
  font-family: ui-rounded;
  text-align: center;
}
.border-right {
  border-right: 1px solid #ecedf1 !important;
}
.font-family-Semibold {
  font-family: Semibold;
}

.font-weight-600 {
  font-weight: 600;
}
.text_left {
  text-align: left;
}
.footer-background {
  margin-left: -41px;
  height: 60px;
  width: 106%;
  background: hsla(0, 0%, 98%, 0.7);
  font-size: 16px;
  text-align: center;
  padding: 1.5%;
  border: 1px solid #ddd;
}
/deep/ .el-loading-mask {
  z-index: 1000;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}
</style>
